<template>
  <div id="logID">
    <div>
      <div>
        <div class="divtwo">
          <p class="pone">公路情况</p>
        </div>
        <div class="buttonspan">
          <el-button>
            <span>{{ approval01 }}</span>
          </el-button>
        </div>
        <div class="divthree">
          <span class="manzulv">满足率</span>
        </div>
        <div class="divinput">
          <el-input size="small" v-model="input" type="text"></el-input>
        </div>
        <div class="divfour">
          <el-select size="small" v-model="value" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div>

        </div>
      </div>
      <div>
        <div class="divPrice">
          <span class="price01">价格（元/吨千米）</span>
        </div>
        <div class="divinput">
          <el-input size="small" v-model="priceInput" type="text" placeholder="请输入内容"></el-input>
        </div>
        <div class="divfour">
          <el-select size="small" v-model="priceValue" placeholder="请选择">
            <el-option
                v-for="item in priceOptions"
                :key="item.priceValue"
                :label="item.priceLabel"
                :value="item.priceValue">
            </el-option>
          </el-select>
        </div>
      </div>
      <div>
        <div class="biandongDiv">
          <span class="biandongyuanying">变动原因</span>
        </div>
        <div class="textareaDiv">
          <el-input v-model="textareaInput" placeholder="请输入内容"></el-input>
        </div>
      </div>
    </div>

    <div>
      <div>
        <div class="railway">
          <p class="pone">铁路情况</p>
        </div>
        <div class="buttonspan">
          <el-button>
            <span>{{ approval02 }}</span>
          </el-button>
        </div>
        <div class="divthree">
          <span class="manzulv">满足率</span>
        </div>
        <div class="divinput">
          <el-input size="small" v-model="railwayInput" type="text"></el-input>
        </div>
        <div class="divfour">
          <el-select size="small" v-model="railwayValue" placeholder="请选择">
            <el-option
                v-for="item in railwayOptions"
                :key="item.railwayValue"
                :label="item.railwayLabel"
                :value="item.railwayValue">
            </el-option>
          </el-select>
        </div>
        <div>

        </div>
      </div>
      <div>
        <div class="divPrice">
          <span class="price01">价格（元/吨千米）</span>
        </div>
        <div class="divinput">
          <el-input size="small" v-model="railwaypriceInput" type="text" placeholder="请输入内容"></el-input>
        </div>
        <div class="divfour">
          <el-select size="small" v-model="railwaypriceValue" placeholder="请选择">
            <el-option
                v-for="item in railwaypriceOptions"
                :key="item.railwaypriceValue"
                :label="item.railwaypriceLabel"
                :value="item.railwaypriceValue">
            </el-option>
          </el-select>
        </div>
      </div>
      <div>
        <div class="biandongDiv">
          <span class="biandongyuanying">变动原因</span>
        </div>
        <div class="textareaDiv">
          <el-input v-model="railwaytextareaInput" placeholder="请输入内容"></el-input>
        </div>
      </div>
    </div>

    <div>
      <div>
        <div class="railway">
          <p class="pone">水运情况</p>
        </div>
        <div class="buttonspan">
          <el-button>
            <span>{{ approval03 }}</span>
          </el-button>
        </div>
        <div class="divthree">
          <span class="manzulv">满足率</span>
        </div>
        <div class="divinput">
          <el-input size="small" v-model="WaterInput" type="text"></el-input>
        </div>
        <div class="divfour">
          <el-select size="small" v-model="waterValue" placeholder="请选择">
            <el-option
                v-for="item in waterOptions"
                :key="item.waterValue"
                :label="item.waterLabel"
                :value="item.waterValue">
            </el-option>
          </el-select>
        </div>
        <div>

        </div>
      </div>
      <div>
        <div class="divPrice">
          <span class="price01">价格（元/吨千米）</span>
        </div>
        <div class="divinput">
          <el-input size="small" v-model="waterPriceInput" type="text" placeholder="请输入内容"></el-input>
        </div>
        <div class="divfour">
          <el-select size="small" v-model="waterPriceValue" placeholder="请选择">
            <el-option
                v-for="item in waterPriceOptions"
                :key="item.waterPriceValue"
                :label="item.waterPriceLable"
                :value="item.waterPriceValue">
            </el-option>
          </el-select>
        </div>
      </div>
      <div>
        <div class="biandongDiv">
          <span class="biandongyuanying">变动原因</span>
        </div>
        <div class="textareaDiv">
          <el-input v-model="waterTextareaInput" placeholder="请输入内容"></el-input>
        </div>
      </div>
    </div>

    <div>
      <div>
        <div class="railway">
          <p class="pone">航运情况</p>
        </div>
        <div class="buttonspan">
          <el-button>
            <span>{{ approval04 }}</span>
          </el-button>
        </div>
        <div class="divthree">
          <span class="manzulv">满足率</span>
        </div>
        <div class="divinput">
          <el-input size="small" v-model="shippingInput" type="text"></el-input>
        </div>
        <div class="divfour">
          <el-select size="small" v-model="shippingValue" placeholder="请选择">
            <el-option
                v-for="item in shippingOptions"
                :key="item.shippingValue"
                :label="item.shippingLabel"
                :value="item.shippingValue">
            </el-option>
          </el-select>
        </div>
        <div>

        </div>
      </div>
      <div>
        <div class="divPrice">
          <span class="price01">价格（元/吨千米）</span>
        </div>
        <div class="divinput">
          <el-input size="small" v-model="shippingPriceInput" type="text" placeholder="请输入内容"></el-input>
        </div>
        <div class="divfour">
          <el-select size="small" v-model="shippingPirceValue" placeholder="请选择">
            <el-option
                v-for="item in shippingPriceOptions"
                :key="item.shippingPirceValue"
                :label="item.shippingPirceLable"
                :value="item.shippingPirceValue">
            </el-option>
          </el-select>
        </div>
      </div>
      <div>
        <div class="biandongDiv">
          <span class="biandongyuanying">变动原因</span>
        </div>
        <div class="textareaDiv">
          <el-input v-model="shippingTextareaInput" placeholder="请输入内容"></el-input>
        </div>
      </div>
    </div>

    <div>
      <div>
        <div class="qita">
          <p class="pone">其他运输情况</p>
        </div>
        <div class="divthree">
          <span class="manzulv">满足率</span>
        </div>
        <div class="buttonspan">
          <el-button>
            <span>{{ approval05 }}</span>
          </el-button>
        </div>
        <div class="divinput">
          <el-input size="small" v-model="otherInput" type="text"></el-input>
        </div>
        <div class="divfour">
          <el-select size="small" v-model="otherPriceValue" placeholder="请选择">
            <el-option
                v-for="item in otherOptions"
                :label="item.otherPriceValue"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div>

        </div>
      </div>
      <div>
        <div class="divPrice">
          <span class="price01">价格（元/吨千米）</span>
        </div>
        <div class="divinput">
          <el-input size="small" v-model="otherPriceInput" type="text" placeholder="请输入内容"></el-input>
        </div>
        <div class="divfour">
          <el-select size="small" v-model="otherPriceValue" placeholder="请选择">
            <el-option
                v-for="item in otherPriceOptions"
                :key="item.otherPriceValue"
                :label="item.otherPriceLable"
                :value="item.otherPriceValue">
            </el-option>
          </el-select>
        </div>
      </div>
      <div>
        <div class="biandongDiv">
          <span class="biandongyuanying">变动原因</span>
        </div>
        <div class="textareaDiv">
          <el-input v-model="otherTextareaInput" placeholder="请输入内容"></el-input>
        </div>
      </div>
    </div>

    <div class="tianbao">
      <el-button type="primary" @click="logAdd">物流填报</el-button>
      <el-button type="primary" @click="logAdd">物流修改</el-button>
      <el-button type="primary" @click="logHistory">历史查询</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Logistics",
  data() {
    return {
      talenttype: "",
      id:"",
      input: "",
      priceInput: "",
      textareaInput: "",
      railwayInput: "",
      railwaypriceInput: "",
      railwaytextareaInput: "",
      WaterInput: "",
      waterPriceInput: "",
      waterTextareaInput: "",
      shippingInput: "",
      shippingPriceInput: "",
      shippingTextareaInput: "",
      otherInput: "",
      otherPriceInput: "",
      otherTextareaInput: "",
      count: 0,
      approval01:'',
      approval02:'',
      approval03:'',
      approval04:'',
      approval05:'',
      options: [{
        value: '选项1',
        label: '上升'
      }, {
        value: '选项2',
        label: '下降'
      }, {
        value: '选项3',
        label: '不变'
      }],
      value: '',
      priceOptions: [{
        priceValue: '选项1',
        priceLabel: '上升'
      }, {
        priceValue: '选项2',
        priceLabel: '下降'
      }, {
        priceValue: '选项3',
        priceLabel: '不变'
      }],
      priceValue: '',
      railwayOptions: [{
        railwayValue: '选项1',
        railwayLabel: '上升'
      }, {
        railwayValue: '选项2',
        railwayLabel: '下降'
      }, {
        railwayValue: '选项3',
        railwayLabel: '不变'
      }],
      railwayValue: "",
      railwaypriceOptions:[{
        railwaypriceValue: '选项1',
        railwaypriceLabel: '上升'
      }, {
        railwaypriceValue: '选项2',
        railwaypriceLabel: '下降'
      }, {
        railwaypriceValue: '选项3',
        railwaypriceLabel: '不变'
      }],
      railwaypriceValue: "",
      waterOptions:[{
        waterValue: '选项1',
        waterLabel: '上升'
      }, {
        waterValue: '选项2',
        waterLabel: '下降'
      }, {
        waterValue: '选项3',
        waterLabel: '不变'
      }],
      waterValue: "",
      waterPriceOptions: [{
        waterPriceValue: '选项1',
        waterPriceLable: '上升'
      }, {
        waterPriceValue: '选项2',
        waterPriceLable: '下降'
      }, {
        waterPriceValue: '选项3',
        waterPriceLable: '不变'
      }],
      waterPriceValue: "",
      shippingOptions:[{
        shippingValue: '选项1',
        shippingLabel: '上升'
      }, {
        shippingValue: '选项2',
        shippingLabel: '下降'
      }, {
        shippingValue: '选项3',
        shippingLabel: '不变'
      }],
      shippingValue: "",
      shippingPriceOptions:[{
        shippingPirceValue: '选项1',
        shippingPirceLable: '上升'
      }, {
        shippingPirceValue: '选项2',
        shippingPirceLable: '下降'
      }, {
        shippingPirceValue: '选项3',
        shippingPirceLable: '不变'
      }],
      shippingPirceValue: "",
      otherOptions:[{
        otherValue: '选项1',
        otherLabel: '上升'
      }, {
        otherValue: '选项2',
        otherLabel: '下降'
      }, {
        otherValue: '选项3',
        otherLabel: '不变'
      }],
      otherValue: "",
      otherPriceOptions:[{
        otherPriceValue: '选项1',
        otherPriceLable: '上升'
      }, {
        otherPriceValue: '选项2',
        otherPriceLable: '下降'
      }, {
        otherPriceValue: '选项3',
        otherPriceLable: '不变'
      }],
      otherPriceValue: "",
    }
  },
  methods: {
    load () {
      this.count += 0
    },
    logAdd(){
      this.$router.push("/logAdd")
    },
    logHistory(){
      this.$router.push("/logHistory")
    }
  },
  created() {
    const _this = this
    _this.axios.get('http://localhost:8081/log/findall/1').then(function (resp){
      console.log(resp.data)
      _this.input = resp.data.logsatisfy
      _this.value = resp.data.shift
      _this.priceInput = resp.data.price
      _this.priceValue = resp.data.priceenter
      _this.textareaInput = resp.data.logchange
      _this.approval01 = resp.data.type
    })
    _this.axios.get('http://localhost:8081/log/findall/2').then(function (resp){
      _this.railwayInput = resp.data.logsatisfy
      _this.railwayValue = resp.data.shift
      _this.railwaypriceInput = resp.data.price
      _this.railwaypriceValue = resp.data.priceenter
      _this.railwaytextareaInput = resp.data.logchange
      _this.approval02 = resp.data.type
    })
    _this.axios.get('http://localhost:8081/log/findall/3').then(function (resp){
      _this.WaterInput = resp.data.logsatisfy
      _this.waterValue = resp.data.shift
      _this.waterPriceInput = resp.data.price
      _this.waterPriceValue = resp.data.priceenter
      _this.waterTextareaInput = resp.data.logchange
      _this.approval03 = resp.data.type
    })
    _this.axios.get('http://localhost:8081/log/findall/4').then(function (resp){
      _this.shippingInput = resp.data.logsatisfy
      _this.shippingValue = resp.data.shift
      _this.shippingPriceInput = resp.data.price
      _this.shippingPirceValue = resp.data.priceenter
      _this.shippingTextareaInput = resp.data.logchange
      _this.approval04 = resp.data.type
    })
    _this.axios.get('http://localhost:8081/log/findall/5').then(function (resp){
      _this.otherInput = resp.data.logsatisfy
      _this.otherPriceValue = resp.data.shift
      _this.otherPriceInput = resp.data.price
      _this.otherPriceValue = resp.data.priceenter
      _this.otherTextareaInput = resp.data.logchange
      _this.approval05 = resp.data.type
    })
  }
}
</script>

<style scoped>
  .pdiv{
    position: absolute;
    margin-top: -20px;
    padding-left: 50px;
  }
  .divtwo{
    width: 820px;
    height: 28px;
    background-color: white;
    border-bottom: #cac6c6 solid 2px;
    padding-left: 50px;
    margin-top: -20px;
  }
  .railway{
    width: 820px;
    height: 28px;
    background-color: white;
    border-bottom: #cac6c6 solid 2px;
    padding-left: 50px;
    margin-top: 120px;
  }
  .pone{
    font-size: 16px;
    font-weight: bolder;
    color: blue;
  }
  .divthree{
    width: 120px;
    height: 32px;
    background-color: deepskyblue;
    float: left;
    margin-left: 25px;
    margin-top: 10px;
  }
  .manzulv{
    position: absolute;
    padding-left: 35px;
    padding-top: 5px;
    color: white;
    font-weight: bolder;
  }
  .divinput{
    float: left;
    margin-top: 10px;
    height: 5px;
    width: 120px;
  }
  .divfour{
    width: 120px;
    height: 32px;
    background-color: deepskyblue;
    float: left;
    margin-top: 10px;
  }
  .price01{
    position: absolute;
    padding-left: 5px;
    font-size: 14px;
    padding-top: 5px;
    color: white;
    font-weight: bolder;
  }
  .divPrice{
    width: 120px;
    height: 32px;
    background-color: deepskyblue;
    float: left;
    margin-left: 120px;
    margin-top: 10px;
  }
  .biandongDiv{
    width: 120px;
    height: 40px;
    background-color: deepskyblue;
    margin-left: -840px;
    margin-top: 60px;
    float: left;
  }
  .biandongyuanying{
    position: absolute;
    padding-left: 28px;
    padding-top: 8px;
    color: white;
    float: left;
    font-weight: bolder;
  }
  .area{
    float: left;
    margin-top: 60px;
    height: 5px;
    width: 120px;
    margin-left: -720px;
  }
  .textareaDiv{
    float: left;
    margin-top: 60px;
    margin-left: -720px;
    width: 720px;
    height: 5px;
  }
  .qita{
    width: 820px;
    height: 28px;
    background-color: white;
    border-bottom: #cac6c6 solid 2px;
    padding-left: 35px;
    margin-top: 120px;
  }
  .buttonspan{
    position: absolute;
    margin-top: -42px;
    margin-left: 145px;
  }
  .tianbao{
    position: absolute;
    margin-top: 120px;
    margin-left: 22px;
  }
  #logID{
    margin-top: 52px;
  }
</style>